<template>
  <div class="box">
    <div class="top-title">
      密码修改
    </div>
    <div class="main_text">
      <div class="password">
        <label>原密码</label>
        <input class="oldpassword" v-model="oldPassword" type="password" placeholder="请输入原密码"/>
        <br>
        <label>新密码</label>
        <input class="newpassword" v-model="newPassword" type="password" placeholder="请输入新密码"/>
        <br>
        <label>确认密码</label>
        <input class="setpassword" v-model="setPassword" type="password" placeholder="请确认新密码"/>
        <el-button type="primary" class="b1" @click="reset">重置</el-button>
        <el-button type="primary" class="b2" @click="submit">提交</el-button>
      </div>
      <!--      <div class="reset1">-->
      <!--&lt;!&ndash;        <button class="b1" @click="reset">重置</button>&ndash;&gt;-->
      <!--&lt;!&ndash;        <button class="b2" @click="submit">提交</button>&ndash;&gt;-->
      <!--        <el-button type="primary" class="b1" @click="reset">重置</el-button>-->
      <!--        <el-button type="primary" class="b2" @click="submit">提交</el-button>-->
      <!--      </div>-->
    </div>
  </div>
</template>
<script>
import axios from "axios"
import {ElMessage} from "element-plus";
export default {
  data(){
    return {
      oldPassword:'',
      newPassword:'',
      setPassword:'',
    }
  },
  methods:{
    submit: function (){
      let userjson=sessionStorage.getItem('user')
      let user=JSON.parse(userjson)
      axios({
        method: 'post',
        url: '/api/login/changePassword',
        params:{
          username:user.username
        },
        data: {
          oldPassword:this.oldPassword,
          newPassword:this.newPassword,
          setPassword:this.setPassword
        },
      })
          .then((res)=>{
            if(res.data.success===false){
              // alert(res.data.errorMsg)
              ElMessage.error('密码修改失败')
            }
            else{
              // alert("密码修改成功")
              ElMessage.success('密码修改成功')
              sessionStorage.clear()
              this.$router.push('/login')
            }
          });
    },
    reset:function (){
      this.setPassword=''
      this.newPassword=''
      this.oldPassword=''
    }
  }
}
</script>
<style scoped>
.box{
  float: right;
  width: 100%;
}
.top-title{
  height: 66px;
  background-color: rgb(84,188,189);
  color: aliceblue;
  font-size: 36px;
  line-height: 66px;
  text-align: center;
}
.main_text .password{
  /*min-width: 400px;*/
  margin-top: 200px;
  margin-left: 300px;
  width: 400px;
}
.main_text .password label{
  margin-left: 20px;
  font-size: 20px;
  background-color: rgb(248,248,248);
  padding: 0px 20px 0px 10px;
}
.main_text .password input{
  line-height: 30px;
  font-size: 14px;
  margin-left: 20px;
  margin-bottom: 20px;
  width:60%;
  background-color: aliceblue;
  border-style: none;
}
.main_text .password .newpassword{
  margin-left: 40px;
}
.main_text .password .oldpassword{
  margin-left: 40px;
}
.main_text .reset1{
  min-width: 400px;
  margin-left: 0px;
}
.main_text  .b1{
  margin-left: 0px;
}
.main_text  .b2{
  margin-left: 200px;
}
</style>